<template>
    <div>
        <div class="student-item">
            <div class="avatar"><img :src="JSON.parse(this.$route.query.data).head_sculpture" alt="" width="100%"></div>
            <div class="user">
                <div class="name">
                    <p class="nickname">{{ JSON.parse(this.$route.query.data).name }}</p>
                    <p class="phone">{{ JSON.parse(this.$route.query.data).phone }}</p>
                </div>
            </div>
        </div>
        <div class="content" v-for="(item, index) in content" :key="index">
            <van-cell-group>
                <van-cell :title="item.kcname" :value="item.cstatus" center :label="item.sktime" />
            </van-cell-group>
        </div>
    </div>
</template>

<script>
import api from '@/api'
export default {
  name: 'index',
  data () {
    return {
      avatar: require('@/assets/img/icon-avatar.png'),
      name: '王小明',
      phone: '180000000000',
      content: [{
        name: '钢琴课',
        statu: '已签到',
        time: '2019-10-19'
      },
      {
        name: '钢琴课',
        statu: '请假',
        time: '2019-10-19'
      },
      {
        name: '钢琴课',
        statu: '未签到',
        time: '2019-10-19'
      }
      ]
    }
  },
  mounted () {
    this.vipSigndetails()
  },
  methods: {
    // 签到详情 agencyCurriculumVvipSigndetails
    vipSigndetails () {
      let params = {
        student_id: JSON.parse(this.$route.query.data).id
      }
      api.agencyCurriculumVvipSigndetails({
        params,
        callback: res => {
          console.log(res)
          this.content = res.data.data
          this.content.forEach(v => {
            if (v.cstatus === 1) {
              v.cstatus = '已签到'
            } else if (v.cstatus === 2) {
              v.cstatus = '请假'
            } else if (v.cstatus === null) {
              v.cstatus = '未签到'
            } else {
              v.cstatus = ''
            }
            if (v.sktime) {
              let date = new Date(parseInt(v.sktime) * 1000)
              let Y = date.getFullYear() + '-'
              let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-'
              let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
              v.sktime = Y + M + D
            }
          })
        }
      })
    }
  }

}
</script>

<style scoped>
    .student-item {
        height: 70px;
        display: flex;
        padding: 0 0 0 15px;
        align-items: center;
        border-bottom: 1px solid #999;
        box-shadow: 0 0 3px #999;
        position: relative;
        z-index: 100
    }

    .student-item .avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
        flex-grow: 0;
        margin-right: 20px;
    }

    .student-item .user {
        flex-shrink: 1;
        flex-grow: 1;
        padding: 12px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    p {
        margin: 5px;
    }

    .nickname {
        color: #1A1D20;
    }

    .phone {
        color: #666666;
    }

    .content {}

    div .van-cell__title {
        display: flex;
        line-height: 65px;
        align-items: center;
    }

    div .van-cell__title span {
        font-size: 18px;
        margin-right: 20px;
    }

    .van-cell__label {
        text-align: center;
    }
</style>
